<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="rchart-box" ref="rChartRef"></div>
    </el-card>
  </div>
 
</template>
<script>
import {getReports} from '../../api/reports'
import * as echarts from 'echarts'
export default {
  created(){
  },
  mounted(){
    this.initChart()
  },
  data(){
    return {
      rChart:null,
      options: {
        title: {
            text: '用户来源'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
      }
    }
  },
  methods:{
    // 获取报表数据
    async getReportsData(){
      try {
        const res = await getReports(1)
        // console.log(res.data);
        Object.assign(this.options, res.data)
      } catch (err) {
        console.log(err);
      }
    },
    // 初始化图标
    async initChart(){
      this.rChart = echarts.init(this.$refs.rChartRef)
      await this.getReportsData()
      this.updateChart()
    },
    // 更新图表
    updateChart(){
      if(!this.rChart){
        return
      }
      this.rChart.setOption(this.options)
      console.log('更新图表');
    }
  },
  watch:{
    options:{
      deep:true,
      handler(){
        this.updateChart()
      }
    }
  }
}
</script>
<style scoped>
.rchart-box{
  width: 750px;
  height: 400px;
}
</style>